<template>
<!-- 导出设备数据 -->
  <div v-drag>
    <div class="mask" @click="closeTip(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>选择导出权限数据</p>
        <i @click="closeTip(false)"></i>
      </div>
      <div class="box_body bind_box">
        <div>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group v-model="checkList" @change="handleCheckItemChange">
            <el-checkbox v-for="(item,index) in tableInfo" :key="index" :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="box_foot">
        <span @click="closeTip(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>

  import axios from "axios";
  import {restUrl} from "../../../../url";
  import {getSelect} from "@/api/sys/permission";
  import {getToken} from "@/utils/auth";

  export default {
    props: ['menuId'],
    data() {
      return {
        loading: false,
        tableInfo: [ ],
        list: [],
        checkList: [],
        checkAll: false,
        isIndeterminate: true,
        downBio:[],
      }
    },
    mounted() {
      this.getTable();
    },

    methods: {
      getTable(){
        let that = this;
        that.loading = true;
        let param = { parentId:-2 }
        getSelect(param).then(res => {
          if (res) {
            if (res&&res.length>0){
              let arr = [];
              res.forEach((item,i)=>{
                if (item.id != 0) {
                  arr.push({id:item.id,name:item.name})
                }
              })
              that.tableInfo = arr;
              that.getRowData();
            }
          } else {
            that.tableInfo = [];
          }
          that.loading = false;
        }).catch((e) => {
          that.tableInfo = [];
          that.loading = false;
        });
      },

      // 获取key
      getRowData() {
        let that = this;
        let arr = [];
        that.tableInfo.forEach((item, index) => {
          arr.push(item.id);
        })
        that.list = arr;
      },

      // 全选
      handleCheckAllChange(val) {
        this.checkList = val ? this.list : [];
        this.isIndeterminate = false;
      },

      // 单选
      handleCheckItemChange(val){
        this.isIndeterminate = this.checkList.length!==this.list.length&&this.checkList.length!==0;
        this.checkAll = this.checkList.length===this.list.length;
      },

      confirmEdit() {
        let that = this;
        if (that.checkList&&that.checkList.length===0){
          that.$message.error({
            message:'请先选择需要导出的权限',
            duration:1500
          })
        }else {
          let keys = '';
          that.checkList.forEach((item, i) => {
            keys = keys + (i > 0 ? ',' : '') + item;
          });
          that.exportData(keys)
        }
      },

      exportData(key) {
        let that = this;
        let token = getToken();
        if (token){
          that.loading = true;
          // let params = new URLSearchParams();
          // params.append('oneIds', key);
          axios.defaults.headers.common['token'] = token;
          axios.post(restUrl + '/sys/permission/excel/downLoadExcel?oneIds='+key,'',{responseType:'arraybuffer'}).then((res) => {
            that.downloadExcel(res.data);
            that.closeTip();
            that.$message.success({
              message:'导出成功！',
              duration:1500
            });
            that.loading = false;
          })
        }else {
          localStorage.clear();
          that.$router.push('/')
        }
      },

      downloadExcel(data) {
        const link = document.createElement('a')
        let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob);
        link.download = '权限信息.xlsx' //下载的文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      },

      closeTip(refresh) {
        this.$emit('listenToChild', {refresh: refresh})
      }
    }
  }
</script>

<style>
  .bind_box {
    min-height: 300px;
  }

  .bind_box label {
    width: calc(50% - 15px);
    margin-bottom: 15px;
  }

  .bind_box label:nth-child(2n) {
    margin-right: 0;
  }
</style>
